<template>
    <el-card shadow="never" class="dict-table-container">
      <template #header>
        <el-button
          type="success"
          @click="openDrawDialog"
          ><i-ep-plus />新增</el-button
        >
        <el-button
          type="danger"
          :disabled="idsRef.length === 0"
          @click="handleDelete()"
          ><i-ep-delete />删除</el-button
        >
      </template>
      <el-table
        v-loading="loadingRef"
        highlight-current-row
        :data="dictTypeListRef"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="expand" label="字典项列表" width="100">
          <template #default="props">
            <el-table :data="props.row.dictItems">
              <el-table-column label="字典项键" prop="name" width="200" />
              <el-table-column label="字典项值" prop="value" align="center" />
              <el-table-column label="排序" prop="sort" align="center" />
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="字典名称" prop="name" width="200" />
        <el-table-column label="字典编码" prop="code" width="200" />
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
            <el-tag v-else type="info">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" align="center" />
        <el-table-column fixed="right" label="操作" align="center" width="220">
          <template #default="scope">
            <El-button
             
              type="primary"
              link
              size="small"
              @click.stop="openDrawDialog(scope.row.id,scope.row.name)"
              ><i-ep-edit />编辑</el-button
            >
            <El-button
              v-hasPerm="['sys:dict_type:delete']"
              type="primary"
              link
              size="small"
              @click.stop="handleDelete(scope.row.id)"
              ><i-ep-delete />删除</El-Button>
          </template>
        </el-table-column>
      </el-table>

      <Pagination
        v-if="totalRef > 0"
        v-model:total="totalRef"
        v-model:page="queryParamsModel.pageNum"
        v-model:limit="queryParamsModel.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <DictDrawDialog ref="dictDrawDialogRef"></DictDrawDialog>
</template>
<script setup lang='ts'>
import Pagination from '@/components/pagination/pagination_index.vue'
import { onMounted, ref } from 'vue';
import ElSvgIcon from '@/components/el-svg-icon/el_svg_icon_index.vue';
import { TypeDictTypePageVoI, TypeDictTypeQueryI } from '@/api/dict/dict_types.ts';
import {$bus} from '@/event_bus/event_bus_index.ts'
import * as dictApi from '@/api/dict/dict_api_index.ts'
import DictDrawDialog from './dict_add_edit_draw.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const queryParamsModel = defineModel<TypeDictTypeQueryI>({ 
   required:true
});
    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
const loadingRef = ref(false);
const idsRef = ref<number[]>([]);
const dictTypeListRef=ref<TypeDictTypePageVoI[]>();
const totalRef = ref(0);

const dictDrawDialogRef=ref();

const handleSelectionChange=(selection: any)=>{
  idsRef.value = selection.map((item: any) => item.id);
}
    

/**
 * 删除字典
 *
 * @param id 字典ID
 */
 function handleDelete(id?: number) {
  const attrGroupIds = [id || idsRef.value].join(",");
  if (!attrGroupIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      dictApi.deleteByIds(attrGroupIds).then(() => {
        ElMessage.success("删除成功");
        queryParamsModel.value.pageNum=1;
      queryParamsModel.value.keywords=undefined
      handleQuery()
      });
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
}
const openDrawDialog=(id?:number,name?:string)=>{
  dictDrawDialogRef.value.openDrawDialog(id,name)
}
/** 查询 */
function handleQuery() {
  loadingRef.value = true;
  dictApi.getDictTypePage(queryParamsModel.value)
    .then(({ data }) => {
      dictTypeListRef.value = data.list;
      totalRef.value = data.total;
    })
    .finally(() => {
      loadingRef.value = false;
    });
}

$bus.on('dict-type-table-query', () => {
    handleQuery()
})

$bus.on('dict-type-reset-and-query', () => {
    queryParamsModel.value.pageNum=1;
    queryParamsModel.value.keywords=undefined
    handleQuery()
})

onMounted(()=>{
  handleQuery();
})
    
</script>
<style lang='scss' scoped>
    
</style>